<template>
	<view class="index w100" v-bind:style="[{'min-height': secondHeight + 'px' }]">
		<!-- 筛选组件调用 -->
	<!-- 	<mSearch :mode="2" button="inside" @search="search($event)"></mSearch> -->
		<view class="serach">
			<view class="content" :style="{'border-radius':radius+'px'}">
				<view class="content-box" >
					<text class="icon icon-serach">&#xe61c;</text>
					<input class="input"  :focus="isFocus" placeholder="请输入公司名称" v-model="inputVal"
					 @focus="focus" @blur="blur" @input="search(1,1)" />
					
					<text v-if="isDelShow" class="icon icon-del" @click="clear">&#xe644;</text>
				</view>
				
			</view>
			<view class="button" :class="{'active':show||active}" @click="search">
				<view class="button-item serachBtn">{{!show?searchName:'搜索'}}</view>
			</view>
		   
		</view>
		<!-- 数据列表 -->
		<view class="list-box">
			<view style="margin-top: 90upx;"></view>
			 <nodata v-if="list.length==0&&inputstate"></nodata>
			<view class="container_of_slide" v-for="(item,index) in list" :key="index">
				<view class="slide_list" @touchstart="touchStart($event,index)" @touchend="touchEnd($event,index)" @touchmove="touchMove($event,index)"
				 @tap="recover(index)" :style="{transform:'translate3d('+item.slide_x+'px, 0, 0)'}">
					<view class="now-message-info" hover-class="uni-list-cell-hover" :style="{width:Screen_width+'px'}" @click="getDetail(item)">
						
						<!-- <view class="icon-circle">{{item.surname}}</view> -->
						<view class="list-right">
							<view class="list-title" v-if="item.name">{{item.name}}</view>
							<view class="list-detail">{{item.remarks}}</view>
							
						</view>
						<view class="list-right-1 joinBtn">
							加入公司
						</view>
					</view>
<!-- 					<view class="group-btn">
						<view class="top btn-div" @tap="top(item.id)" v-if="item.isShare">
							分享
						</view>
						<view class="removeM btn-div" @tap="removeM(index, item.id)">
							删除
						</view>
					</view> -->
					<view style="clear:both"></view>
				</view>
			</view>
		</view>
		<!-- 分享弹窗 -->
		<view mode="top-right" class="scan-box" v-if="visible">
			<view class="scan-item">
				<view class="scan-content">
					<view class="scan-icon">
						<image src="../../static/slide-list/icon-scan.png" class="scan-icon-img"></image>
					</view>
					<image src="../../static/slide-list/fork.png" class="scan-btn" @click="cancelEvent"></image>
					<image :src="img" class="scan-img"></image>
					<view class="scan-text">
						扫一扫查看分享信息
					</view>
				</view>
			</view>
		</view>
		
		<!-- 授权确认 -->
		<view mode="top-right" class="scan-box" v-if="authorization">
			<view class="scan-item">
				<view class="scan-content">
					<view class="scan-icon">
						<image src="../../static/slide-list/icon-scan.png" class="scan-icon-img"></image>
					</view>
					<image v-if='showCancelbtn' src="../../static/slide-list/fork.png" class="scan-btn" @click="cancelEvent"></image>
					<!-- <image :src="img" class="scan-img"></image> -->
					
					<view class="qrcode scan-img">
						<tki-qrcode  cid="qrcode" ref="qrcode" :val="showval" :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
						
					</view>
					<view class="scan-text" style="bottom: 20upx;">
						<view class="">
							{{choosecompany}}
						</view>
						<view class="">
							{{username}}
						</view>
						请您的上级部门经理扫描二维码
					</view>
				</view>
			</view>
		</view>
		
		<!-- 浮动添加按钮 -->
		<!-- <view style="color: white;" class="btn-plusempty" hover-class="bottom-btn-hover" @click="addCustomer">
			首页
		</view> -->
		<!-- 底部导航 -->
		<footernav pagePath='user'></footernav>
	</view>
</template>

<script>
	 import mSearch from '../../components/m-search.vue'
// import request from '@/common/vmeitime-http/requstx.js' //引进requst方法
	 import {conpanysearch,conpanylist} from '@/common/api/pool.js'
	 import {companyapply,deptjreport,deptjstatus} from '@/common/api/company.js';
	 	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';	
		import {userinfo} from '@/common/api/user.js'
	export default {
		components: {
			mSearch,
			tkiQrcode
		},
		name: 'slide-list',
		computed: {
			Screen_width() {
				return uni.getSystemInfoSync().windowWidth;
			}
		},
		props: {
			mode: {
				value: Number,
				default: 1
			},
			button: {
				value: String,
				default: 'outside'
			},
			show: {
				value: Boolean,
				default: true
			},
			radius: {
				value: String,
				default: 60
			}
		},
		data() {
			return {
				choosecompany:"",
				showval:'',
				showshare:false,
				inputstate:false,
				username:"",
				showCancelbtn:false,
				ifShow: true,
				val: '二维码', // 要生成的二维码值
				size: 350, // 二维码大小
				unit: 'upx', // 单位
				onval: false, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				
				img: '../../static/slide-list/qr_code.png',
				visible: false,
				authorization:false,
				start_slide_x: 0,
				btnWidth: 0,
				startX: 0,
				LastX: 0,
				startTime: 0,
				screenName: '',
				list : [],
				btuBottom: '0',
				secondHeight: '',
				active: false,
				inputVal: '',
				searchName: '取消',
				isDelShow: false,
				isFocus: false,
				uinfo:"",
				timesgo:true,
				choosecompanyid:"",
			};
		},
		onShow() {
			userinfo().then(res=>{
				this.uinfo = res.data.data
				this.username=res.data.data.name;
			})
			
			const res = uni.getSystemInfoSync();
			// 计算主体部分高度,单位为px
			this.secondHeight = res.windowHeight
			
			// conpanylist({}).then(res=>{

			// 	this.list = res.data.data
			// 	console.log(this.list)
			// })
			
		},
		methods: {
			getuinfo(){
				let that=this;
				deptjstatus({companyid:this.choosecompanyid}).then(res=>{
					console.log(res)
					if(res.data.data&&res.data.data.status=='2'){	
						that.authorization=false;
						that.timesgo=false;
						uni.showModal({
						  content: '加入成功',
						  showCancel: false,
						  buttonText: '我知道了',
						  success: (res) => {
							if (res.confirm) {
							 setTimeout(function() {
							 	uni.reLaunch({
							 		url: '/pages/user/user'
							 	});
							 },1000);
							} else if (res.cancel) {
							  console.log('用户点击取消');
							}
						  }
						})
						return;
					}if(res.data.data&&res.data.data.status=='3'){
						that.authorization=false;
						that.timesgo=false;;
						uni.showModal({
						  content: '不接受加入',
						  showCancel: false,
						  buttonText: '我知道了',
						  success: (res) => {
							if (res.confirm) {
								 
							} else if (res.cancel) {
							  console.log('用户点击取消');
							}
						  }
						})
						return;
					}else{
						this.showtimes();
					}
					
				})
			},
			showtimes(){
				let that=this;
				if(this.timesgo){
					this.timesgo=false;
					setTimeout(function() {
						console.log('1')
						that.timesgo=true;
						that.getuinfo();
					},10000);
				}
			},
			focus() {
				this.active = true;
			},
			blur() {
				this.isFocus = false;
				if (!this.inputVal) {
					this.active = false;
				}
			},
			clear() {
				this.inputVal = '';
				this.active = false;
				this.$emit('search', '');
			},
			getFocus() {
				this.isFocus = true;
			},

			cancelEvent(){
				uni.hideToast();
				this.timesgo=false;
				this.visible = false;
				this.authorization=false;
				this.showCancelbtn=false;
				
			},
			search(e, val) {
				this.screenName = e

				conpanysearch({'name':this.inputVal}).then(res=>{
					this.list = res.data.data
					if(this.list.length==0){
						this.inputstate=true;
					}
				})

			},
			addCustomer(){
				console.log('点击添加按钮')
				uni.reLaunch({
					url: '/pages/main/main'
				});
			},
			getDetail(item){
				this.choosecompany=item.name;
				this.choosecompanyid=item.id;
				
				let detail = {
					companyid: item.id,
					companyname: item.name,
					shareuserid:this.uinfo.id,
					shareusername:this.uinfo.name,
				};
				// uni.navigateTo({
				// 	url: './departmentPersonnel?detaildata=' + encodeURIComponent(JSON.stringify(detail))
				// });
				deptjreport({companyid:item.id,uid:this.uinfo.id}).then(res=>{
					console.log('上报',res)
				})
				this.authorization=true;
				this.showval=this.weixinhttpurl+'/#/pages/Departmentmanagement/usersharedepartment?detaildata='+ encodeURIComponent(JSON.stringify(detail))
				this.showtimes();
				setTimeout(()=>{
					this.showCancelbtn=true;
				},1000)
				// uni.showModal({
				//     title: '确认加入该公司?',
				//     content: item.name,
				//     success: function (res) {
				//         if (res.confirm) {
				//             console.log('用户点击确定');
				// 			companyapply({companyid:item.id}).then(res=>{
				// 				if(res.data.code == 200){
				// 					uni.showToast({
				// 					    icon: 'none',
				// 					    title: res.data.message,
				// 					    duration: 2000
				// 					});
				// 				}else{
				// 					uni.showToast({
				// 					    icon: 'none',
				// 					    title: res.data.message,
				// 					    duration: 2000
				// 					});
				// 				}
				// 			})
				//         } else if (res.cancel) {
				//             console.log('用户点击取消');
				//         }
				//     }
				// });
			},
			// 滑动开始
			touchStart(e, index) {
				//记录手指放上去的时间
				this.startTime = e.timeStamp;
				//记录滑块的初始位置
				this.start_slide_x = this.list[index].slide_x;
				// 按钮宽度
				uni.createSelectorQuery()
					.selectAll('.group-btn')
					.boundingClientRect()
					.exec(res => {
						if (res[0] != null) {
							this.btnWidth = res[0][index].width * -1;
						}
					});
				// 记录上一次开始时手指所处位置
				this.startX = e.touches[0].pageX;
				// 记录上一次手指位置
				this.lastX = this.startX;
				//初始化非当前滑动消息列的位置
				this.list.forEach((item, eq) => {
					if (eq !== index) {
						item.slide_x = 0;
					}
				});
			},
			// 滑动中
			touchMove(e, index) {
				const endX = e.touches[0].pageX;
				const distance = endX - this.lastX;
				// 预测滑块所处位置
				const duang = this.list[index].slide_x + distance;
				// 如果在可行区域内
				if (duang <= 0 && duang >= this.btnWidth) {
					this.list[index].slide_x = duang;
				}
				// 此处手指所处位置将成为下次手指移动时的上一次位置
				this.lastX = endX;
			},
			// 滑动结束
			touchEnd(e, index) {
				let distance = 10;
				const endTime = e.timeStamp;
				const x_end_distance = this.startX - this.lastX;
				if (Math.abs(endTime - this.startTime) > 200) {
					distance = this.btnWidth / -2;
				}
				// 判断手指最终位置与手指开始位置的位置差距
				if (x_end_distance > distance) {
					this.list[index].slide_x = this.btnWidth;
				} else if (x_end_distance < distance * -1) {
					this.list[index].slide_x = 0;
				} else {
					this.list[index].slide_x = this.start_slide_x;
				}
			},
			// 点击回复原状
			recover(index) {
				this.list[index].slide_x = 0;
			},
			// 分享
			top(id) {
				console.log('点击分享')
				if(this.visible){
					this.visible = false
				}else{
					this.visible = true
				}
			},
			// 删除
			removeM(index, id) {
				let self = this
				console.log('点击删除')
				uni.showModal({
					title: '',
					content: '确定要删除该信息吗？',
					confirmText: '删除',
					confirmColor: '#ff3b32',
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定')
							self.list.splice(index, 1)
							uni.showToast({
								icon: "success",
								title: '操作成功!',
								duration: 2000
							});
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				});
			}
		}
	};
</script>

<style scoped>
	.index{
		background: #F8F8F8;
	}
	.list-box{
		padding: 20upx 0;
	}
	.container_of_slide {
		width: 100%;
		overflow: hidden;
	}
.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		background-color: #efeff4;
	}
	
	.slide_list {
		transition: all 100ms;
		transition-timing-function: ease-out;
		min-width: 200%;
		height: 160upx;
	}

	.now-message-info {
		box-sizing:border-box;
		display: flex;
		align-items: center;
		/* justify-content: space-between; */
		font-size: 16px;
		clear:both;
		height: 160upx;
		padding: 0 30upx;
		margin-bottom: 20upx;
		background: #FFFFFF;
	}
	.now-message-info,
	.group-btn {
		float: left;
	}

	.group-btn {
		display: flex;
		flex-direction: row;
		height: 160upx;
		min-width: 100upx;
		align-items: center;

	}

	.group-btn .btn-div {
		height: 160upx;
		color: #fff;
		text-align: center;
		padding: 0 50upx;
		font-size: 34upx;
		line-height: 160upx;
	}

	.group-btn .top {
		background-color: #c4c7cd;
	}

	.group-btn .removeM {
		background-color: #ff3b32;
	}
	
	
	.icon-circle{
		background: #3396fb;
		border-radius: 100%;
		width:100upx;
		height: 100upx;
		line-height:100upx;
		text-align:center;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 20px;
		float: left;
	}
	.list-right{
		float: left;
		margin-left: 25upx;
		margin-right: 30upx;
	}
	.list-right-1{
		float: right;
		color: #A9A9A9;
	}
	.list-title{
		width: 460upx;
		line-height:1.5;
		overflow:hidden;
		margin-bottom: 10upx;
		color:#333;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1;
		overflow:hidden;
	}
	.list-detail{
		width: 350upx;
		font-size: 14px;
		color: #a9a9a9;
		display:-webkit-box;
		-webkit-box-orient:vertical;
		-webkit-line-clamp:1;
		overflow:hidden;
	}
	.button-box{
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		z-index: 998;
		background: #F8F8F8;
	}
	.btn-sub{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		float: left;
		width: 100%;
		height: 100upx;
		background: #F8F8F8;
		color: #7fb2ff;
	}
	.btn-plusempty{
		width: 110upx;
		height: 110upx;
		background: #007bfa;
		position: fixed;
		bottom: 50upx;
		right: 20upx;
		border-radius: 100%;
		overflow: hidden;
		text-align: center;
		line-height: 110upx;
	}
	.empty{
		color: #999999;
	}
	.plusempty-img{
		width: 50upx;
		height: 50upx;
		margin-top: 30upx;
	}
	.scan-box{
		display:block;
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background-color:rgba(0, 0, 0, 0.3);
		z-index:991;
	}
	.scan-item{
		display:-webkit-box;
		display:-webkit-flex;
		display:-ms-flexbox;
		display:flex;
		position:relative;
		margin:0 auto;
		width:80%;
		height:100%;
		-webkit-box-pack:center;
		-webkit-justify-content:center;
		-ms-flex-pack:center;
		justify-content:center;
		-webkit-box-align:center;
		-webkit-align-items:center;
		-ms-flex-align:center;
		align-items:center;
		-webkit-box-sizing:border-box;
		box-sizing:border-box;
		opacity:1;

	}
	.scan-content{
		position:relative;
		width: 460upx;
		height: 610upx;
		background: #FFFFFF;
		border-radius: 20upx;
	}
	.scan-icon{
		position: absolute;
		top: -50upx;
		left: 180upx;
		width: 100upx;
		height: 100upx;
		border-radius: 100%;
		box-sizing:border-box;
		background: #FFFFFF;
		padding: 20upx;
	}
	.scan-icon-img{
		width: 100%;
		height: 100%;
	}
	.scan-text{
		position: absolute;
		bottom: 40upx;
		left: 0;
		width: 100%;
		text-align: center;
		font-size: 14px;
	}
	.scan-share{
		width: 100%;
		height: 100%;
	}
	.scan-img{
		width: 300upx;
		height: 300upx;
		margin: auto;
		display: block;
		position: absolute;
		top: 60upx;
		left: 50upx;
		z-index: 99;
	}
	.scan-btn{
		top:-30upx;
		left:auto;
		right:-30upx;
		bottom:auto;
		position:absolute;
		width:64upx;
		height:64upx;
		border-radius:50%;
		z-index:99999;
		display: flex;
	}
	.uni-list-cell-hover {
		background-color: #eeeeee;
	}
	.bottom-btn-hover{
		background: #0564c7!important;;
	}
</style>
<style lang="scss" scoped>
	.serach {
		position: fixed;
		left: 0;
		top: var(--status-bar-height) + 44px;
		z-index: 99;
		display: flex;
		width: 100%;
		border-bottom: 1px #f5f5f5 solid;
		box-sizing: border-box;
		padding: 15upx;
		font-size: $uni-font-size-base;
		background: #fff;

		.content {
			display: flex;
			align-items: center;
			width: 100%;
			height: 60upx;
			border: 1px #ccc solid;
			background: #fff;
			overflow: hidden;
			transition: all 0.2s linear;
			border-radius: 30px;

			.content-box {
				width: 100%;
				display: flex;
				align-items: center;

				&.center {
					justify-content: center;
				}

				.icon {
					padding: 0 15upx;

					&.icon-del {
						font-size: 38upx;
					}
				}

				.input {
					width: 100%;
					max-width: 100%;
					line-height: 60upx;
					height: 60upx;
					transition: all 0.2s linear;

					&.center {
						width: 200upx;
					}

					&.sub {
						// position: absolute;
						width: auto;
						color: grey;
					}
				}
			}

			.serachBtn {
				height: 100%;
				flex-shrink: 0;
				padding: 0 30upx;
				background: #3769e4;
				line-height: 60upx;
				color: #fff;
				border-left: 1px #ccc solid;
				transition: all 0.3s;
			}
		}

		.button {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			flex-shrink: 0;
			width: 0;
			transition: all 0.2s linear;
			white-space: nowrap;
			overflow: hidden;

			&.active {
				padding-left: 15upx;
				width: 100upx;
			}
		}
	}

	@font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/font_989023_efq0mtli526.ttf') format('truetype');
	}

	.icon {
		font-family: iconfont;
		font-size: 32upx;
		font-style: normal;
		color: #999;
	}
	
	.serachBtn {
		height: 100%;
		flex-shrink: 0;
		padding: 0 10upx;
		background: #3769e4;
		line-height: 60upx;
		color: #fff;
		border-left: 1px #ccc solid;
		transition: all 0.3s;
		border-radius: 8px;
	}
	
	.joinBtn {
		// height: 100%;
		flex-shrink: 0;
		padding: 0 10upx;
		background: #00aa00;
		line-height: 60upx;
		color: #fff;
		border-left: 1px #ccc solid;
		transition: all 0.3s;
		border-radius: 8px;
	}
</style>
